<template>
  <div class="myCollect">
    <van-nav-bar
      title="收藏列表"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-card
      :desc="item.desc"
      :title="item.title"
      :thumb="'http://liufusong.top:8080' + item.houseImg"
      v-for="item in collectList" :key="item.houseCode"
    >
      <template #tags>
        <van-tag plain>{{item.tags[0]}}</van-tag>
      </template>
      <template #price>
        <span>{{item.price}}</span> 元/月
      </template>
    </van-card>
  </div>
</template>

<script>
import { getCollectList } from '@/api/user.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      collectList: []
    }
  },

  computed: {
    ...mapState(['user'])
  },

  created () {
    this.loadCollectList()
  },

  methods: {
    onClickLeft () {
      this.$router.back()
    },
    async loadCollectList () {
      const res = await getCollectList(this.user.token)
      console.log(res)
      this.collectList = res.data.body
    }
  }
}
</script>

<style scoped lang='less'>
// nav-bar
/deep/.van-nav-bar__content {
  background-color: #16A77A;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-icon-arrow-left:before {
  color: #fff;
}

.myCollect {
  .van-tag--plain {
    background-color: #E1F5F8;
    color: #39BECD;
  }
  .van-card__price {
    color: #FA5741;
    span {
      font-size: 32px;
      font-weight: 700;
    }
  }
}
</style>
